<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>品牌列表</title>
    <script src="js/vue.js"></script>
    <script src="js/axios.min.js"></script>
</head>
<body>
<div id="app">


    <a href="addBrand.html"><input type="button" value="新增"></a><br>
    <hr>
    <table id="brandTable" border="1" cellspacing="0" width="100%">
        <tr>
            <th>序号</th>
            <th>品牌名称</th>
            <th>企业名称</th>
            <th>排序</th>
            <th>品牌介绍</th>
            <th>状态</th>
            <th>操作</th>
        </tr>

        <tr v-for="(brand,index) in brands" align="center">
            <td> {{(index + 1) }} </td>
            <td> {{brand.brandName}} </td>
            <td> {{brand.companyName}}</td>
            <td> {{brand.ordered }}</td>
            <td> {{brand.description}}</td>
            <td v-if="brand.status ==1"> 启用</td>
            <td v-else> 禁用 </td>
            <td><a  v-bind:href="url+brand.id" >修改</a>
                <input type="button" value="删除" @click="deleteBrand(brand.id)"></td>
        </tr>
    </table>
</div>
</body>

<script type="text/javascript">

    //1.创建VUE对象
    var vm = new Vue({
        el: '#app',
        data: {
            url:'addBrand.html?id=',
            brands: []
        },//数据模型

        methods: {
            getBrandList() {

                //1.获取表格对象
                var table = document.getElementById("brandTable");

                //2.发送ajax请求
                axios({
                    url: '/brand-case-vue/brandAll',
                    method: 'GET'
                }).then((response) => {
                    //3.获取响应数据
                    this.brands = response.data;
                })

            },
            deleteBrand(id) {

                axios({
                    url: '/brand-case-vue/brandDel?id=' + id,
                    method: 'GET'
                }).then((response) => {

                    if (response.data) {
                        this.getBrandList();
                    } else {
                        alert("删除失败");
                    }

                })
            }
        }, //定义函数
        mounted() { //生命周期函数
            this.getBrandList()
        }
    })
</script>
</html>